<template>

  <!-- 数据展示 -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="Order_Id" label="主键编号" width="90" />
      <el-table-column prop="Order_SnowId" label="雪花编号" width="120" />
      <el-table-column prop="Order_From" label="客户来源" width="90" />
      <el-table-column prop="Order_UserName" label="入住人" width="90" />
      <el-table-column prop="Order_Phone" label="入住人手机号" width="120" />
      <el-table-column prop="Order_Intime" label="入住时间" width="180" />
      <el-table-column prop="Order_Outtime" label="离店时间" width="180" />
      <el-table-column prop="Order_Desc" label="入住信息" width="90" />
      <el-table-column prop="Order_Price" label="金额" width="80" >
        <template v-slot="scope">
            <span style="color: red;">{{ scope.row.Order_Price.toFixed(2)}} CNY</span>
        </template>
      </el-table-column>
      <el-table-column prop="Order_RoomCode" label="房间编号" width="90" />
      <el-table-column prop="Order_UserId" label="房客id" width="80" />
      <el-table-column prop="OrderStateName" label="订单状态" width="90" />
      <el-table-column prop="" label="操作" >
        <template v-slot="scpoe">
            <el-button type="primary"  @click="UserCheckIn(scpoe.row)" v-if="scpoe.row.OrderStateName=='预定'">入住</el-button>
            <el-button type="success"  @click="HandelPay(scpoe.row)" v-if="scpoe.row.OrderStateName=='退房'">支付</el-button>
            <el-button type="warning"  @click="ChangeState(scpoe.row.Order_Id,4,'取消订单')" v-if="scpoe.row.OrderStateName=='入住'">取消</el-button>
            <el-button type="warning"  @click="ChangeState(scpoe.row.Order_Id,6,'超时未入住')" v-if="scpoe.row.OrderStateName=='入住'">超时未入住</el-button>


        </template>
      </el-table-column>
    </el-table>

    <!-- 弹框展示内容 -->
  <el-dialog
    v-model="dialogVisible"
    title="Tips"
    width="500"
  >
  <el-form
    ref="ruleFormRef"
    style="max-width: 600px"
    :model="ruleForm"
    :rules="rules"
    label-width="auto"
    class="demo-ruleForm"
    :size="formSize"
    status-icon
  >
    <el-form-item label="入住人" prop="Order_UserName">
      <el-input v-model="ruleForm.Order_UserName" />
    </el-form-item>
    <el-form-item label="手机号" prop="Order_Phone">
      <el-input v-model="ruleForm.Order_Phone" />
    </el-form-item>
    <el-form-item label="房间号" prop="Order_RoomCode">
      <el-select v-model="ruleForm.Order_RoomCode" placeholder="选择房间号">
        <el-option label="101" value="101" />
        <el-option label="102" value="102" />
      </el-select>
    </el-form-item>
    
    <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef)">
        提交
      </el-button>
      <el-button @click="resetForm(ruleFormRef)">清空</el-button>
      
      <el-button @click="dialogVisible = false">关闭</el-button>
    </el-form-item>
  </el-form>
  </el-dialog>
</template>
  
  <script lang="ts" setup>
  import axios from 'axios';
  import { ElMessage, ElMessageBox } from 'element-plus'
  import { onMounted, reactive, ref } from 'vue'
  import type { ComponentSize, FormInstance, FormRules } from 'element-plus'

  
  const tableData = ref([{
      Order_Id: 0,
      Order_SnowId: "string",
      Order_From: "string",
      Order_UserName: "string",
      Order_Phone: "string",
      Order_Intime: "2025-03-10T07:25:12.159Z",
      Order_Outtime: "2025-03-10T07:25:12.159Z",
      Order_Desc: "string",
      Order_Price: 588,
      Order_RoomCode: "string",
      Order_UserId: 0,
      Order_State: 1,
      OrderStateName: "预定",
      Order_IsDelete: true
  }])

  onMounted(()=>{
    LoadOrderInfo()
  })
  //加载订单信息
  const LoadOrderInfo=()=>{
    axios.get("/api/Order/ShowOrderINfo")
    .then(res=>{
        tableData.value=res.data.Data
    })
  }

  
//弹窗


const dialogVisible = ref(false)
//弹框展示入住信息
const UserCheckIn=(info:any)=>{

  //依次获取入住人姓名,手机号,订单编号

  ruleForm.Order_UserName=info.Order_UserName,
  ruleForm.Order_Phone=info.Order_Phone,
  ruleForm.Order_Id=info.Order_Id,
  dialogVisible.value=true;
}

const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
//弹窗的数据
const ruleForm = reactive({
  Order_Id:'',
  Order_UserName: '',
  Order_Phone: '',
  Order_RoomCode:''
})

//验证
const rules = reactive<FormRules>({
  Order_UserName: [
    { required: true, message: '入住人不能为空', trigger: 'blur' },
    { min: 2, max: 5, message: '入住人姓名介于2-5个字符', trigger: 'blur' },
  ],
  Order_Phone: [
    {
      required: true,
      message: '手机号不能为空',
      trigger: 'blur',
    },
  ],
  
  Order_RoomCode: [
    {
      required: true,
      message: '房间号哦啊不能为空',
      trigger: 'change',
    },
  ],
})
//入住提交
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      //完成用户提交入住请求
      axios.post("/api/Order/UserCheckIn",
      {
        Order_Id:ruleForm.Order_Id,
        Order_UserName:ruleForm.Order_UserName,
        Order_Phone:ruleForm.Order_Phone,
        Order_RoomCode:ruleForm.Order_RoomCode.toString()
      })
      .then(res=>{
        if(res.data.Data>0){
          ElMessage.success("用户办理入住成功")
          dialogVisible.value=false
          LoadOrderInfo()
        }else{
          ElMessage.error("入住失败")
        }
      })
      
    } else {
      console.log('error submit!', fields)
    }
  })
}
//清空
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

//重置状态
const ChangeState=(orderid:number,orderstatre:number,orderMeg:string)=>{
  ElMessageBox.confirm(
    '确认【'+orderMeg+'】吗?',
    '警告',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      axios.put("/api/Order/ChangeOrderState",null,{
        params:{
          oid:orderid,
          orderstate:orderstatre
        }
      })
      .then(res=>{
        if(res.data.Data>0)
        {
          ElMessage({
          type: 'success',
          message: orderMeg+'修改成功',
        })
        LoadOrderInfo()
        }else{
          ElMessage.error(orderMeg+'修改失败')
        }
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消修改',
      })
    })
}


//支付
const HandelPay=(info:any)=>{
  ElMessageBox.confirm(
    '确认支付吗?',
    '警告',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      console.log(info)
      axios.post("/api/Order/PagePay",null,{
        params:{
          orderCode:info.Order_SnowId,
          money:info.Order_Price
        }
      })
      .then(res=>{
        if(res.status==200)
        {
          document.writeln(res.data)
        }
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消支付',
      })
    })
}

  </script>
  